/* Platform specific iOS CSS */

/* Variables */

@ios-list-border-radius: 7px;
@ios-list-link-border-radius: @ios-list-border-radius - 1;

@default-background-color: #7185a2;
@button-background-color: #496b9a;
@button-active-background-color: #264e8c;

@ios-list-border-color: #b1b3b8;
@ios-list-background-color: #f0f0f0;

@pull-to-refresh-color: #788193;
@pull-to-refresh-shadow: rgba(255,255,255,.5);

@tabstrip-icon-color: rgba(255,255,255,.3);
@ios-tabstrip-active-icon-color: #43c5f5;
@button-icon-gradient: top, rgba(255,255,255,.7), rgba(255,255,255,.9);
@buttongroup-icon-gradient: top, rgba(0,0,0,.5), rgba(0,0,0,.3);
@tabstrip-icon-gradient: top, rgba(255,255,255,.4), rgba(255,255,255,0);
@tabstrip-active-icon-gradient: top, rgba(255,255,255,.6) 0, rgba(255,255,255,0) 50%, rgba(255,255,255,.3) 100%;

@button-active-shadow: ~"inset 0 0 0 1px rgba(0,0,0,.3), inset 0 1px 3px rgba(0,0,0,.5), inset 0 0 0 1000px rgba(0,0,0,.2)";
@buttongroup-active-shadow: ~"0 1px 0 0 rgba(255,255,255,.4), inset 0 0 0 1000px rgba(0,0,0,.2)";
@ios-detail-shadow: ~"inset 0 0 0 .16rem #fff, 0 1px 3px rgba(0,0,0,.5)";
@ios-detail-active-shadow: ~"inset 0 0 0 .16rem #fff, 0 1px 3px rgba(0,0,0,.5), inset 0 0 0 1000px rgba(0,0,0,.2)";

/* Support for iOS6 */
@media only screen and (height : 320px) and (orientation : landscape) {
    .km-ios6 {
        height: 100% !important;
    }
}

/* CSS */

.km-ios:after
{
     content: url("images/back.png");
     display: none;
}

.km-ios
{
    background: #fff;
    font: bold .9em HelveticaNeue, sans-serif;
}

.km-ios .km-view
{
    overflow: hidden;
}

.km-ios .km-view-title,
.km-ios .km-dialog-title
{
    position: relative;
    visibility: visible;
    text-align: center;
    color: #fff;
    font-size: 1.4em;
    line-height: 2.3em;
    font-weight: bold;
    text-shadow: 0 -1px rgba(0,0,0,.3);
    margin-left: auto;
    margin-right: auto;
    .box-shadow(inset 0 -1px 0 rgba(0,0,0,.3));
}

.km-ios.km-horizontal .km-view-title
{
    line-height: 2em;
}

.km-ios .km-toolbar,
.km-ios .km-navbar,
.km-ios .km-button,
.km-ios .km-tabstrip,
.km-ios .km-popup .k-item,
.km-ios .km-actionsheet > li > a
{
    .linear-gradient-image(top, rgba(255,255,255,0.5), rgba(255,255,255,0.45) 6%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.15) 50%, rgba(100,100,100,0));
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    color: #FFF;
    overflow: visible;
    .border-radius(5px);
    text-shadow: 0 -1px rgba(0,0,0,.3);
    text-decoration: none;
    border: 1px solid #394d68;
    border-color: #2f3740 #394d68 #375073;
    background-color: @default-background-color;
}

.km-ios .km-button
{
    text-align: center;
    border-width: 0;
    border-bottom: 1px solid rgba(255,255,255,.5);
    padding: .4em .8em;
    background: transparent, @button-background-color;
    .linear-gradient-image(top, rgba(255,255,255,0.35), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0));
    .box-shadow(~"inset 0 0 0 1px rgba(0,0,0,.3), inset 0 1px 3px rgba(0,0,0,.5)");
}

.km-ios .km-button:active,
.km-ios .km-button.km-state-active
{
    background-color: @button-active-background-color;
    .box-shadow(@button-active-shadow);
}

.km-ios li.km-state-active
{
    border-width: 0;
    color: white;
}

.km-ios :-webkit-any(.km-back)
{
    overflow: hidden;
    margin-left: -1em;
    padding-left: 2.1em;
    -webkit-mask-image: url("images/back.png");
    -webkit-mask-size: auto 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position-x: 1em;
}

.km-ios .km-back:after
{
    content: "\a0";
    display: none;
    position: absolute;
    left: 1em;
    top: 0;
    bottom: 0;
    width: 12px;
    background: url("");
    -webkit-background-size: auto 100%;
    background-size: auto 100%;
    background-repeat: no-repeat;
}

.km-ios :-webkit-any(.km-back):after
{
    display: block;
}

.km-ios.km-on-android :-webkit-any(.km-back)
{
    -webkit-mask-image: none;
    padding-left: .8em;
    margin-left: 0;
}

.km-ios.km-on-android :-webkit-any(.km-back):after
{
    display: none;
}

.km-ios :-moz-any(.km-back)
{
    overflow: hidden;
    margin-left: 0;
    padding-left: 1.4em;
    background-size: auto 100%;
    clip-path: ~"url('data:image/svg+xml;utf-8,<svg xmlns=%22http:%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox=%220 0 1 1%22><clipPath id=%22backbutton%22 clipPathUnits=%22objectBoundingBox%22><path fill=%22black%22 d=%22M8.7,1c0,0-8,0-8,0C0,1,0.2,1,0,0.5 C0.2-0,0,0,0.5,0H9V1z%22%2F><%2FclipPath><%2Fsvg>#backbutton')";
}

.km-ios :-moz-any(.km-back):after
{
    display: block;
    left: 0;
}

.km-ios .km-switch
{
    width: 5rem;
    height: 1.8rem;
    line-height: 1.65rem;
    overflow: hidden;
    font-family: HelveticaNeue, Arial, sans-serif;
}

.km-ios4 .km-switch
{
    width: 6.4rem;
    height: 2rem;
    line-height: 2rem;
}

.km-ios .km-switch-wrapper
{
    overflow: hidden;
    background-color: #f0f0f0;
}

.km-ios .km-switch-background,
.km-ios .k-slider-selection
{
    background: 4.25em 0 no-repeat #007EE9;
    .linear-gradient-image(top, rgb(219, 219, 219), rgb(238, 238, 238) 50%);
    margin-left: -3.4rem;
}

.km-ios4 .km-switch-background
{
    background-color: #3074e7;
    background-position: 6.4em 0;
    margin-left: -6rem;
}

.km-ios .km-switch-background:after
{
    content: "\a0";
    display: inline-block;
    margin: 0 0 0 .3rem;
    width: 78%;
    height: 50%;
    line-height: 100%;
    vertical-align: bottom;
    .linear-gradient-image(top,  rgba(255,255,255,.14) 0, rgba(255,255,255,.4));
}

.km-ios4 .km-switch-background:after
{
    margin: 0;
    width: 100%;
    height: 58%;
}

.km-ios .km-switch-container
{
    padding: 1px 0 1px 1px;
    border-width: 0;
    .box-shadow(~"inset 0 2px 2px 0 rgba(0,0,0,.3), inset 0 -1px 1px 0 rgba(0,0,0,.2)");
    .linear-gradient-image(top, rgba(0,0,0,0), rgba(0,0,0,0) 95%, rgba(0,0,0,.2));
}

.km-ios4 .km-switch-container
{
    padding: 0;
    border: 1px solid #999;
}

.km-ios .km-checkbox
{
    border: 3px solid #e5e5e5;
    background-color: #fff;
    .border-radius(15px);
    .transition(~"all 100ms ease-out");
}

.km-ios .km-checkbox-checked
{
    border-color: #fff;
    background-color: #BB0000;
    .linear-gradient-image(top, rgba(241, 150, 155, 1), rgba(230, 70, 78, .5) 50%, rgba(222, 11, 21, .5) 50%, rgba(183, 0, 0, 0));
    .box-shadow(0 2px 3px #333);
}

.km-ios .km-switch-handle
{
    width: 1.6em;
    margin: -1px 3px 0 -1px;
    border: 1px solid rgba(102,102,102,.8);
    .box-shadow(~"inset 0 0 0 1px #fff");
    .linear-gradient-image(top, rgb(255, 255, 255), rgb(215, 215, 215) 5%, rgb(255, 255, 255));
}

.km-ios4 .km-switch-handle
{
    width: 2.72em;
    margin: -1px 0 0 -1px;
}

.km-ios .km-switch-label-off
{
    left: 1.5em;
    color: #7f7f7f;
}

.km-ios .km-switch-label-on
{
    left: -3em;
    color: #fff;
}

.km-ios .km-switch-label-on,
.km-ios .km-switch-label-off
{
    width: 195%;
    font-size: 1em;
    line-height: 1.5em;
    vertical-align: middle;
}

.km-ios4 .km-switch-label-on,
.km-ios4 .km-switch-label-off
{
    width: 130%;
    line-height: 1.8em;
}

.km-ios4 .km-switch-label-off
{
    left: 104%;
}

.km-ios4 .km-switch-label-on
{
    left: -134%;
}

.km-ios .km-switch-handle,
.km-ios .km-switch-wrapper,
.km-ios .km-switch-container,
.km-ios .km-switch-background
{
    .border-radius(1.3em);
}

.km-ios .km-switch-container,
.km-ios .km-switch-wrapper
{
    .border-radius(1.5em);
    .box-sizing(border-box);
    border: 1px solid #f0f0f0;
    background-clip: content-box;
}

.km-ios4 .km-switch-handle,
.km-ios4 .km-switch-wrapper,
.km-ios4 .km-switch-container,
.km-ios4 .km-switch-background
{
    .border-radius(5px);
}

.km-ios .km-switch-background:after
{
    .border-radius(~"1em 1em .5em .5em");
}

.km-ios4 .km-switch-background:after
{
    .border-radius(none);
}

.km-ios .km-badge,
.km-ios .km-detail
{
    .linear-gradient-image(top, rgba(255,255,255,.5), rgba(255,255,255,.2) 50%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0));
    color: #FFF;
    background-color: #bc0404;
    .border-radius(3em);
    .box-shadow(@ios-detail-shadow);
}

.km-ios .km-detail
{
    border: 0;
    background-color: #1F6DD8;
}

.km-ios .km-detail:active,
.km-ios .km-detail.km-state-active
{
    -webkit-box-shadow: @ios-detail-active-shadow;
    box-shadow: @ios-detail-active-shadow;
}

.km-ios .km-listview .km-switch
{
    margin-top: -.85rem;
}

.km-ios4 .km-listview .km-switch
{
    margin-top: -1rem;
}

/* Filter box */

.km-ios .km-filter-form
{
    color: @ios-list-border-color;
    border-color: currentcolor;
    background-color: currentcolor;
    .linear-gradient-image(top, rgba(255,255,255,.6), rgba(255,255,255,.3));
}

.km-ios .km-filter-wrap
{
    color: inherit;
    .border-radius(2em);
    .box-shadow(inset 0 1px 3px @ios-list-border-color);
    .box-shadow(inset 0 1px 3px currentcolor);
    border-color: currentcolor;
    background: transparent;
}

.km-ios .km-listview-wrapper .km-filter-wrap
{
    background: #fff;
}

.km-ios .km-filter-wrap:before,
.km-ios .km-filter-reset .km-clear
{
	color: #adadad;
}

.km-ios .km-filter-wrap .km-clear:after
{
    content: "\e031";
}

/* Icons */

.km-ios .km-icon
{
    color: #fff;
}

.km-ios .km-list li > .km-icon,
.km-ios .km-listview-link > .km-icon
{
    color: #000;
}

.km-ios li.km-state-active .km-icon
{
    color: #fff;
}

.km-ios .km-detail .km-icon
{
    color: #fff;
}

.km-ios :-moz-any(.km-detail) .km-icon
{
    top: 5%;
    left: 7%;
}

.km-ios .km-button .km-icon:before,
.km-ios .km-button .km-contactadd:before,
.km-ios .km-button .km-rowdelete:before,
.km-ios .km-button .km-rowinsert:before,
.km-ios .km-button .km-detaildisclose:before
{
    display: block;
    color: rgba(0,0,0,.3);
    margin-top: -1px;
}

.km-ios .km-rowinsert
{
    background-color: #24870D;
}

.km-ios .km-rowdelete
{
    background-color: #B01B1A;
}

.km-ios .km-buttongroup
{
    border: none;
    background: none;
    padding: 0 1px 1px 0;
}

.km-ios .km-buttongroup .km-button,
.km-tablet .km-ios .km-buttongroup .km-button
{
    .border-radius(0);
    border-width: 1px;
    border-right-width: 0;
    border-color: rgba(0,0,0,.3);
    .box-shadow(0 1px 0 0 rgba(255,255,255,.4));
}

.km-tablet .km-ios .km-buttongroup .km-button:not(.km-state-active),
.km-ios .km-header > .km-buttongroup .km-button:not(.km-state-active),
.km-ios .km-footer > .km-buttongroup .km-button:not(.km-state-active),
.km-ios .km-content .km-buttongroup .km-button:not(.km-state-active)
{
    color: #929292;
    text-shadow: 0 1px rgba(255,255,255,.8);
}

.km-ios .km-header > .km-buttongroup .km-button,
.km-ios .km-footer > .km-buttongroup .km-button,
.km-ios .km-content .km-buttongroup .km-button
{
    background-color: #fff;
    .linear-gradient-image(top, rgba(0,0,0,0), rgba(0,0,0,.12) 50%, rgba(0,0,0,.25));
}

.km-ios .km-navbar .km-buttongroup .km-button:not(.km-state-active)
{
    background-color: transparent;
}

.km-ios .km-view .km-buttongroup .km-button:first-child
{
    -webkit-border-bottom-left-radius: 5pt;
    -webkit-border-top-left-radius: 5pt;
    .border-radius(5pt 0 0 5pt);
}

.km-ios .km-view .km-buttongroup .km-button:last-child
{
    -webkit-border-bottom-right-radius: 5pt;
    -webkit-border-top-right-radius: 5pt;
    .border-radius(0 5pt 5pt 0);
}

.km-ios .km-buttongroup .km-button:last-child
{
    border-right-width: 1px;
}

.km-ios .km-buttongroup .km-state-active
{
    text-shadow: none;
    border-width: 1px 0 1px 1px;
    -webkit-box-shadow: @buttongroup-active-shadow;
    box-shadow: @buttongroup-active-shadow;
}

.km-ios .km-header > .km-buttongroup .km-state-active,
.km-ios .km-footer > .km-buttongroup .km-state-active,
.km-ios .km-content .km-buttongroup .km-state-active
{
    color: #fff;
    border-color: rgba(0,0,0,.4);
    background-color: #3D7EEB;
    .linear-gradient-image(top, rgba(0,0,0,.3), rgba(0,0,0,0) 50%, rgba(255,255,255,.05) 50%, rgba(255,255,255,.25));
    .box-shadow(inset -1px 0 2px rgba(0,0,0,.3));
}

.km-ios .km-buttongroup .km-state-active:last-child
{
    margin-left: -1px;
}

.km-ios .km-navbar,
.km-ios .km-toolbar
{
    overflow: hidden;
}

.km-ios6 .km-navbar,
.km-ios6 .km-toolbar
{
    .linear-gradient-image(top, rgba(255,255,255,.65), rgba(255,255,255,0));
    background-color: #506D93;
    .box-shadow(inset 0 1px 0 rgba(255,255,255,.3));
    overflow: visible;
}

.km-ios6 .km-view-title
{
    .box-shadow(~"rgba(0,0,0,.3) 0px -1px 0px inset, rgba(0,0,0,.3) 0px 1px 3px");
}

.km-ios .km-navbar,
.km-ios .km-toolbar,
.km-ios .km-tabstrip
{
    border: 0;
    .border-radius(0);
}

.km-ios .km-tabstrip
{
    padding: .1em 0;
    border-top: 1px solid rgba(255,255,255,.2);
    background-color: #222;
    .linear-gradient-image(top, rgba(46,46,46,.8), rgba(21,21,21,.5) 50%, rgba(0,0,0,.8) 50%, rgba(0,0,0,.8));
    .box-shadow(0 -1px 0 0 #000);
    text-shadow: none;
}

.km-ios6 .km-tabstrip
{
    background-color: #1A1A1A;
    text-shadow: 0 1px 1px #000;
    .linear-gradient-image(top, rgba(255,255,255,.18), rgba(255,255,255,0));
}

.km-phone .km-ios .km-tabstrip
{
    display: table;
    border-collapse: separate;
    border-spacing: 3px 0;
}

.km-phone .km-ios .km-tabstrip .km-button
{
    display: table-cell;
}

.km-root .km-ios6 .km-tabstrip
{
    border-spacing: 0;
    padding: 0;
}

.km-ios .km-tabstrip .km-button
{
    .border-radius(3pt);
    .box-shadow(none);
    background: transparent;
    border: 0;
    font-size: .7em;
    padding: 0 .3em;
    min-width: 6em;
    margin: 0 .5%;
    text-shadow: inherit;
    color: #777;
}

.km-ios6 .km-tabstrip .km-button
{
    margin: 0;
    padding: .1em .3em .4em;
    color: #d1d1d1;
    .border-radius(0);
    .box-shadow(~"1px 0 0 rgba(255,255,255,.2), 2px 0 0 rgba(0,0,0,.5)");
}

.km-ios6 .km-tabstrip .km-button:last-child
{
    .box-shadow(none);
}

.km-ios .km-tabstrip .km-button:active,
.km-ios .km-tabstrip .km-state-active
{
    color: #FFF;
    background: rgba(100,100,100,.3);
}

.km-ios6 .km-tabstrip .km-button:active,
.km-ios6 .km-tabstrip .km-state-active,
.km-ios6 .km-tabstrip .km-state-active:last-child,
.km-ios6 .km-tabstrip .km-button:active:last-child
{
    background-color: #1A1A1A;
    .box-shadow(~"0 0 2px rgba(255,255,255,.4)");
    .linear-gradient-image(top, rgba(255,255,255,0), rgba(255,255,255,.18),
                           left, rgba(0,0,0,.6), rgba(0,0,0,0) 3%, rgba(0,0,0,0) 97%, rgba(0,0,0,.6));
}

.km-ios .km-list
{
    overflow: visible;
}

.km-ios .km-listinset > li:first-child,
.km-ios .km-listgroupinset .km-list > li:first-child
{
    border: 1px solid @ios-list-border-color;
    border-width: 1px 1px 0;
    border-color: @ios-list-border-color;
    .border-radius(@ios-list-border-radius @ios-list-border-radius 0 0);
    .box-shadow(~"0 1px 0 0 rgba(255,255,255,.4), inset 0 1px 0 0 rgba(200,200,200,.4), inset 0 -1px 0 rgba(0,0,0,.2)");
}

.km-ios .km-list > li
{
    border-top: 1px solid rgba(255,255,255,.1);
    border-bottom: 1px solid rgba(0,0,0,.1);
}

.km-ios .km-listinset > li,
.km-ios .km-listgroupinset .km-list > li
{
    border: 1px solid @ios-list-border-color;
    border-width: 0 1px;
    .box-shadow(~"inset 0 -1px 0 rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.4)");
}

.km-ios .km-listinset > li:last-child,
.km-ios .km-listgroupinset .km-list > li:last-child
{
    border: 1px solid @ios-list-border-color;
    border-width: 0 1px 1px 1px;
    .border-radius(0 0 @ios-list-border-radius @ios-list-border-radius);
    .box-shadow(~"0 1px 0 0 rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4)");
}

.km-ios .km-listinset > li:first-child:last-child,
.km-ios .km-listgroupinset .km-list > li:first-child:last-child
{
    border-width: 1px;
    .border-radius(@ios-list-border-radius);
}

.km-ios li.km-state-active .km-listview-link,
.km-ios li.km-state-active .km-listview-label
{
    color: #fff;
    background: #0260E8;
    .linear-gradient-image(top, rgba(255,255,255,.28), rgba(255,255,255,.1) 50%, rgba(255,255,255,0));
}

.km-ios .km-listview-link:after
{
    color: #7b7b7b;
}

.km-ios .km-state-active .km-listview-link:after
{
    color: #fff;
    border-color: inherit;
}

.km-on-ios.km-ios6 .km-listview-link:after
{
    width: .66rem;
    height: .64rem;
    border-width: 0;
    box-shadow: inset -.2rem .2rem 0;
}

.km-ios .km-listinset > li:first-child,
.km-ios .km-listgroupinset .km-list > li:first-child,
.km-ios .km-listinset li:first-child > .km-listview-link,
.km-ios .km-listgroupinset li:first-child > .km-listview-link,
.km-ios .km-listinset li:first-child > .km-listview-label,
.km-ios .km-listgroupinset li:first-child > .km-listview-label
{
    -webkit-border-top-left-radius: @ios-list-link-border-radius;
    -webkit-border-top-right-radius: @ios-list-link-border-radius;
    .border-radius(@ios-list-link-border-radius @ios-list-link-border-radius 0 0);
}

.km-ios .km-listinset li:last-child > .km-listview-link,
.km-ios .km-listgroupinset li:last-child > .km-listview-link,
.km-ios .km-listinset li:last-child > .km-listview-label,
.km-ios .km-listgroupinset li:last-child > .km-listview-label
{
    -webkit-border-bottom-left-radius: @ios-list-link-border-radius;
    -webkit-border-bottom-right-radius: @ios-list-link-border-radius;
    .border-radius(0 0 @ios-list-link-border-radius @ios-list-link-border-radius);
}

.km-ios .km-listinset li:first-child:last-child > .km-listview-link,
.km-ios .km-listgroupinset li:first-child:last-child > .km-listview-link,
.km-ios .km-listinset li:first-child:last-child > .km-listview-label,
.km-ios .km-listgroupinset li:first-child:last-child > .km-listview-label
{
    .border-radius(@ios-list-link-border-radius);
}

.km-ios .km-group-title
{
    color: #FFF;
    text-shadow: 0 1px 1px rgba(100,100,100,.8);
    border-top: 1px solid rgba(255,255,255,.2);
    border-bottom: 1px solid rgba(0,0,0,0);
    background-color: #94A3AE;
    .linear-gradient-image(top, rgba(255,255,255,0), rgba(255,255,255,.3));
    .box-shadow(0 -1px 0 #86929A);
    position: relative;
}

.km-ios .km-listgroupinset .km-group-title
{
    font-size: 1.2em;
    color: #4C566C;
    padding: 0;
    background: none;
    border: none;
    .box-shadow(none);
    text-shadow: 0 1px 1px rgba(255,255,255,.8);
}

.km-ios .km-list > li
{
    display: block;
    vertical-align: middle;
    line-height: 1.6em;
    font-size: 1.2em;
    font-weight: bold;
    overflow: hidden;
    background: @ios-list-background-color;
}

.km-ios,
.km-ios .km-content
{
    background: @ios-list-background-color;
    color: #000;
}

.km-ios .km-insetcontent .km-content
{
    background: none;
}

.km-ios .km-insetcontent
{
    background: #c4ccd5 url("");
}

.km-ios .km-button .km-icon,
.km-ios .km-button.km-state-active .km-icon
{
    text-shadow: none;
    .linear-gradient-image(@button-icon-gradient);
}

.km-ios .km-buttongroup .km-icon
{
    margin-top: .1em;
    .linear-gradient-image(@buttongroup-icon-gradient);
}

.km-ios .km-tabstrip .km-icon
{
    color: @tabstrip-icon-color;
    .linear-gradient-image(@tabstrip-icon-gradient);
}

.km-ios6 .km-tabstrip .km-icon
{
    color: #666666;
}

.km-ios .km-tabstrip .km-state-active .km-icon
{
    color: @ios-tabstrip-active-icon-color;
    .linear-gradient-image(@tabstrip-active-icon-gradient);
}

.km-ios6 .km-tabstrip .km-state-active .km-icon
{
    color: #00B0FF;
}

:-webkit-any(.km-root) .km-ios .km-icon:after
{
    background-color: currentcolor;
}

.km-ios .km-tabstrip .km-icon:before
{
    display: block;
    margin-top: 1px;
}

.km-ios .km-tabstrip .km-state-active .km-icon:before
{
    margin-top: 2px;
}

/* Pull To Refresh */

.km-ios .km-load-more,
.km-ios .km-scroller-pull
{
    color: @pull-to-refresh-color;
    text-shadow: 0 1px 1px @pull-to-refresh-shadow;
}

.km-ios .km-load-more .km-icon,
.km-ios .km-scroller-pull .km-icon
{
    width: 2.4rem;
    height: 2.4rem;
    font-size: 2.4rem;
}

.km-ios .km-load-more .km-icon,
.km-ios .km-scroller-pull .km-icon
{
    color: @pull-to-refresh-color;
    text-shadow: 0 1px 1px @pull-to-refresh-shadow;
}

.km-ios *:-webkit-any(.km-load-more) .km-icon:after,
.km-ios *:-webkit-any(.km-scroller-pull) .km-icon:after
{
    background: @pull-to-refresh-shadow;
    text-shadow: 0 1px 1px @pull-to-refresh-color;
}

.km-ios .km-scroller-refresh .km-icon
{
    width: 2rem;
    height: 2rem;
    font-size: 2rem;
}

/* ScrollView */

.km-ios .km-pages li
{
    background: rgba(0,0,0,.1);
    border: 1px solid rgba(0,0,0,.3);
    .border-radius(1em);
    .box-shadow(0 1px 1px rgba(255,255,255,.5));
}

.km-ios .km-pages .km-current-page
{
    background: rgba(0,0,0,.3);
}

/* Slider */

.km-ios .k-slider .k-draghandle,
.km-ios .k-slider .k-draghandle:hover
{
    border: 0;
    .border-radius(5em);
    background-color: #fff;
    .linear-gradient-image(top, #ccc, #fff);
    .box-shadow(~"inset 0 0 0 1px #f9f9f9, 1px 1px 3px rgba(0,0,0,.3)");
}

.km-ios .k-slider-selection
{
    background: 0 0 no-repeat;
    .linear-gradient-image(top, rgba(0,0,0,.5), rgba(0,0,0,0) 15%, rgba(0,0,0,0) 90%, rgba(0,0,0,.4),
                           top, rgb(42,93,178), rgb(109,169,247));
}

.km-ios .k-slider-track
{
    .linear-gradient-image(top, rgba(0,0,0,.3), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 90%, rgba(0,0,0,.4),
                           top, rgb(219,219,219), rgb(255,255,255));
}

.km-ios .k-slider-selection
{
    margin-left: 0;
}

/* Dialog */

.km-ios .km-dialog
{
    background: rgba(10,25,65,.8);
    border: 2px solid rgba(255,255,255,.8);
    .box-shadow(3px 3px 5px #111);
}

.km-ios .km-dialog-title
{
    .linear-gradient-image(top, rgba(255,255,255,.3), rgba(255,255,255,0) 60%);
    text-shadow: 0 -1px #333;
}

.km-ios .km-dialog:before
{
    background: ~"url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22><defs><clipPath id=%22clip%22><rect x=%220%22 y=%220%22 width=%22100%%22 height=%22100%%22 rx=%2210%22 ry=%2210%22/></clipPath></defs><ellipse fill=%22white%22 cx=%2250%%22 cy=%220%22 rx=%2280%%22 ry=%2260%%22 clip-path=%22url(%23clip)%22/></svg>')";
}

.km-ios .km-dialog-content
{
    color: #fff;
    text-shadow: 0 -1px #333;
}

.km-ios .km-dialog .km-button
{
    display: block;
    margin: .4em;
    font-size: 1.3em;
    text-align: center;
    padding: .44em;
    .user-select(none);
    .border-radius(4px);
}

/* Loader */

.km-ios .km-loader
{
    .border-radius(20px);
}

.km-ios .km-loading,
.km-ios .km-load-more .km-icon,
.km-ios .km-scroller-refresh .km-icon
{
    -webkit-animation: km-ios-spin 1.5s infinite linear;
}

/* Scroller */

.km-ios .km-touch-scrollbar
{
    .border-radius(.4em);
}

/* Forms */

.km-ios .km-list input[type=password],
.km-ios .km-list input[type=search],
.km-ios .km-list input[type=number],
.km-ios .km-list input[type=tel],
.km-ios .km-list input[type=url],
.km-ios .km-list input[type=email],
.km-ios .km-list input[type=month],
.km-ios .km-list input[type=color],
.km-ios .km-list input[type=week],
.km-ios .km-list input[type=date],
.km-ios .km-list input[type=time],
.km-ios .km-list input[type=datetime],
.km-ios .km-list input[type=datetime-local],
.km-ios .km-list input[type=text]:not(.k-input),
.km-ios .km-list select:not([multiple]),
.km-ios .km-list .k-dropdown-wrap,
.km-ios .km-list textarea
{
    .appearance(none);
    font-size: 1.1rem;
    color: #385487;
    min-width: 6em;
    border: 0;
    padding: .4em;
    outline: none;
    background: transparent;
}

.km-ios .km-list .k-dropdown-wrap
{
	padding: .2em;
}

.km-ios .km-list .k-dropdown-wrap .k-input
{
    color: #385487;
}

.km-ios .km-list .k-dropdown
{
    margin-top: -1.05em;
    font-weight: normal;
}

.km-ios .km-list input[type=color],
.km-ios .km-list input[type=week],
.km-ios .km-list input[type=date],
.km-ios .km-list input[type=time],
.km-ios .km-list input[type=month],
.km-ios .km-list input[type=datetime],
.km-ios .km-list input[type=datetime-local],
.km-ios .km-list .k-dropdown
{
    text-align: right;
}

.km-ios .km-list .k-dropdown .k-dropdown-wrap
{
    display: block;
    .border-radius(0);
    background: transparent;
    .box-shadow(none);
}

.km-ios .km-list select:not([multiple]) option
{
    color: #333;
}

.km-ios .km-content .km-list .km-state-active input[type=password],
.km-ios .km-content .km-list .km-state-active input[type=search],
.km-ios .km-content .km-list .km-state-active input[type=number],
.km-ios .km-content .km-list .km-state-active input[type=tel],
.km-ios .km-content .km-list .km-state-active input[type=url],
.km-ios .km-content .km-list .km-state-active input[type=email],
.km-ios .km-content .km-list .km-state-active input[type=month],
.km-ios .km-content .km-list .km-state-active input[type=color],
.km-ios .km-content .km-list .km-state-active input[type=week],
.km-ios .km-content .km-list .km-state-active input[type=date],
.km-ios .km-content .km-list .km-state-active input[type=time],
.km-ios .km-content .km-list .km-state-active input[type=datetime],
.km-ios .km-content .km-list .km-state-active input[type=datetime-local],
.km-ios .km-content .km-list .km-state-active input[type=text]:not(.k-input),
.km-ios .km-content .km-list .km-state-active select:not([multiple]),
.km-ios .km-content .km-list .km-state-active textarea
{
    color: #fff;
}

/* PopUp + ActionSheet */

.km-ios .km-popup .k-popup
{
    font-size: .8em !important;
}

.km-ios .km-actionsheet > li > a
{
    color: #000;
    font-size: 1.4em;
    text-align: center;
}

.km-ios .km-popup .k-item,
.km-ios .km-actionsheet > li > a
{
    overflow: hidden;
    background: #fff;
    .linear-gradient-image(top, rgba(0,0,0,.3), rgba(0,0,0,0) 5%, rgba(0,0,0,0) 98%, rgba(70,70,70,.5),
                     top, rgba(0,0,0,0), rgba(0,0,0,0.1) 50%, rgba(0,0,0,.2) 50%, rgba(0,0,0,.2));
    padding: .3em 0 .3em .6em;
    color: #000;
    border-width: 3px;
    border-color: rgba(0,0,0,.8);
    .border-radius(.6em);
    .box-shadow(~"inset 0 1px 1px rgba(255,255,255,.5), 0 1px 1px rgba(255,255,255,.3)");
    .box-sizing(border-box);
    background-clip: padding-box;
    text-shadow: 0 1px #fff;
}

.km-ios6 .km-popup .k-item,
.km-ios6 .km-actionsheet > li > a
{
    font-size: 1.5em;
    padding: .35em 0 .35em .6em;
    border-color: rgba(40,40,40,.9);
    background: #fff;
    text-shadow: none;
    .linear-gradient-image(top, rgba(0,0,0,0), rgba(0,0,0,.2) 50%, rgba(0,0,0,.25) 85%, rgba(0,0,0,.15));
}

.km-root .km-ios .km-popup .k-item
{
    border: 3px solid rgba(0,0,0,.8);
}

.km-ios .km-popup .k-item,
.km-ios .km-actionsheet > li
{
    margin: .5em 0;
}

.km-ios .km-popup .k-item:first-child,
.km-ios .km-actionsheet > li:first-child
{
    margin: 1em 0 .5em;
}

.km-ios .km-popup .k-item:last-child
{
    margin: .5em 0 1em;
}

.km-ios .km-actionsheet > .km-actionsheet-cancel
{
    margin: 1.5em 0 1em;
}

.km-ios .km-actionsheet > li > a:active,
.km-ios .km-actionsheet > li > a:hover,
.km-ios li.km-actionsheet-cancel > a
{
    color: #fff;
}

.km-ios .km-popup .k-state-hover,
.km-ios .km-popup .k-state-focused,
.km-ios .km-popup .k-state-selected,
.km-ios .km-actionsheet > li > a:active,
.km-ios .km-actionsheet > li > a:hover,
.km-ios li.km-actionsheet-cancel > a
{
    background: #072398;
    .linear-gradient-image(top, rgba(0,0,0,.3), rgba(0,0,0,0) 5%, rgba(0,0,0,0) 98%, rgba(70,70,70,.5),
                     top, rgba(255,255,255,.6), rgba(255,255,255,.1) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,.15));
    background-clip: padding-box;
    color: #fff;
    text-shadow: 0 -1px rgba(0,0,0,.3);
}

.km-ios6 .km-popup .k-state-hover,
.km-ios6 .km-popup .k-state-focused,
.km-ios6 .km-popup .k-state-selected,
.km-ios6 .km-actionsheet > li > a:active,
.km-ios6 .km-actionsheet > li > a:hover,
.km-ios6 li.km-actionsheet-cancel > a
{
    background: #1537c6;
    .linear-gradient-image(top, rgba(255,255,255,.45), rgba(255,255,255,.1) 60%, rgba(255,255,255,0) 80%, rgba(255,255,255,.15));
    text-shadow: 0 1px rgba(0,0,0,.3);
}

.km-ios li.km-actionsheet-cancel > a
{
    background-color: rgba(0,0,0,.8);
}

.km-ios6 li.km-actionsheet-cancel > a
{
    background-color: #2b3038;
    .linear-gradient-image(top, rgba(255,255,255,.3), rgba(255,255,255,0) 60%, rgba(255,255,255,0) 85%, rgba(255,255,255,.08));
}

.km-ios .km-popup
{
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0,0,0,.6);
    .box-sizing(border-box);
}

.km-ios .km-popup .k-list-container
{
    width: 100% !important;
}

.km-ios .km-actionsheet,
.km-phone .km-ios .km-popup .k-list-container
{
    max-height: 80%;
}

.km-ios .km-actionsheet-wrapper,
.km-ios .km-popup .k-list-container
{
    background: rgba(0,0,0,.7);
    .linear-gradient-image(top, rgba(255,255,255,0.35), rgba(255,255,255,0.1) 10%, rgba(255,255,255,0) 10%, rgba(255,255,255,0));
    color: #fff;
    bottom: 0;
    border: 0;
    padding: 0 .5em;
    border-top: 1px solid rgba(255,255,255,.5);
    .border-radius(0);
    .box-sizing(border-box);
}

.km-ios6 .km-actionsheet-wrapper,
.km-ios6 .km-popup .k-list-container
{
    padding: 1em 1.5em;
    background: rgba(23,37,64,.6);
    .linear-gradient-image(top, rgba(255,255,255,0.5), rgba(255,255,255,0.2) 10%, rgba(255,255,255,0));
}

.km-phone .km-ios6 .km-actionsheet-wrapper,
.km-phone .km-ios6 .km-popup .k-list-container
{
    border-top: 0;
    .box-shadow(~"0 -1px 2px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.5)");
}

.km-ios6 .km-shim
{
    background: rgba(23,23,46,.5);
}

.km-ios .km-actionsheet > li > a
{
    display: block;
}

.km-ios .km-shim .k-animation-container
{
    left: 0;
    top: auto;
    bottom: 0;
}

.km-ios .km-shim li.km-actionsheet-title
{
    visibility: hidden;
    height: 0;
    margin: .5em 0 0;
}

/* Checkboxes and Radios */

.km-ios .km-listview-label input[type=radio]:checked,
.km-ios .km-listview-label input[type=checkbox]:checked
{
    background-color: #3E4E65;
    -webkit-mask-box-image: url('');
}

.km-ios .km-state-active input[type=radio]:checked,
.km-ios .km-state-active input[type=checkbox]:checked
{
    background-color: #fff;
}

/* Tablet Styles */

.km-tablet .km-ios .km-tabstrip
{
    padding: .2rem 0 .2rem;
}

.km-tablet .km-ios.km-horizontal .km-tabstrip
{
    padding: .2rem 0 0;
}

.km-tablet .km-pane.km-ios6 .km-tabstrip
{
    padding: 0;
}

.km-tablet .km-ios .km-tabstrip .km-icon
{
    margin: .3rem auto;
}

.km-tablet .km-ios.km-horizontal .km-tabstrip .km-icon
{
    margin: .1rem auto;
}

.km-tablet .km-ios .km-tabstrip .km-button
{
    padding: .1rem .3rem;
    margin: 0 1.5%;
}

.km-tablet .km-ios6 .km-tabstrip .km-button
{
    margin: 0;
    min-width: 8em;
}

.km-tablet .km-ios.km-horizontal .km-tabstrip .km-button
{
    padding: 0 .2rem;
}

.km-tablet .km-ios .km-view-title,
.km-tablet .km-ios .km-modalview .km-view-title
{
    line-height: 2.2em;
    color: #848B92;
    text-shadow: 0 1px rgba(255,255,255,.8);
}

.km-tablet .km-ios *:not(.km-tabstrip):not(.km-buttongroup) > .km-button
{
    background: #6A727D;
}

.km-ios6 *:not(.km-tabstrip):not(.km-buttongroup) > .km-button,
.km-tablet .km-ios *:not(.km-tabstrip):not(.km-buttongroup) > .km-button
{
    .linear-gradient-image(top, rgba(255,255,255,.5), rgba(255,255,255,0));
}

.km-ios6 *:not(.km-tabstrip):not(.km-buttongroup) > .km-button,
{
    background-color: #44648f;
}

.km-tablet .km-ios .km-navbar,
.km-tablet .km-ios .km-toolbar,
.km-tablet .km-ios .km-modalview .km-header
{
    background: #A8ACB9;
    .linear-gradient-image(top, rgba(255,255,255,.9), rgba(255,255,255,0));
}

.km-tablet .km-ios .km-content
{
    background: #D7D9DF none;
}

.km-tablet .km-ios .km-actionsheet-title,
.km-tablet .km-ios li.km-actionsheet-cancel
{
    display: none;
}

.km-tablet .km-ios6 .km-actionsheet-wrapper,
.km-tablet .km-ios6 .km-popup .k-list-container
{
    padding: .6em 1em;
}

/* SplitView */

.km-ios .km-splitview
{
    background: #000;
}

.km-ios .km-splitview > .km-pane
{
    border-right: 1px solid #000;
    background: #fff;
    .border-radius(5px);
}

.km-ios .km-split-vertical > .km-pane
{
    border-right: 0;
    border-bottom: 1px solid #000;
}

.km-ios .km-splitview .km-navbar,
.km-ios .km-splitview .km-toolbar,
.km-ios .km-modalview > :first-child,
.km-ios .km-splitview .km-view > :first-child
{
    .border-radius(5px 5px 0 0);
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
}

.km-ios .km-splitview .km-tabstrip,
.km-ios .km-modalview > :last-child,
.km-ios .km-splitview .km-view > :last-child
{
    .border-radius(0 0 5px 5px);
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
}

.km-ios .km-modalview > :first-child:last-child,
.km-ios .km-pane > .km-view > :first-child:last-child
{
    .border-radius(5px);
}

.km-ios .km-splitview .km-pane:last-child
{
    border: 0;
}

/* PopOver */

.km-ios .km-popup-wrapper,
.km-ios .km-modalview-wrapper
{
    padding: 15px;
}

.km-ios .km-popup.km-pane,
.km-tablet .km-ios .km-actionsheet-wrapper,
.km-ios .km-popup.km-pane .km-navbar .km-button
{
    background-color: rgba(10,18,38,.9);
}

.km-ios .km-popup.km-pane
{
    border: 5px solid transparent;
}

.km-ios .km-popup.km-pane,
.km-tablet .km-ios .km-actionsheet-wrapper
{
    .border-radius(5px);
    .box-shadow(~"0 0 15px rgba(0,0,0,.5), 0 0 2px rgba(0,0,0,.5)");
}

.km-ios .km-modalview,
.km-ios .km-popup.km-pane .km-view
{
    overflow: visible;
    .border-radius(0);
}

.km-ios .km-modalview .km-navbar,
.km-ios .km-modalview .km-toolbar,
.km-ios .km-popup.km-pane .km-navbar,
.km-ios .km-popup.km-pane .km-toolbar,
.km-ios .km-popup.km-pane .km-tabstrip
{
    background: none;
    .box-shadow(none);
}

.km-ios .km-modalview .km-header,
.km-ios .km-popup.km-pane .km-header
{
    .linear-gradient-image(top, rgba(255,255,255,0.35), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0));
    padding: 0 5px;
    margin: -5px -5px 2px;
    .border-radius(5px 5px 0 0);
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -webkit-margin-collapse: separate;
}

.km-ios .km-popup-arrow:after,
.km-ios .km-popup-arrow:before
{
    border-color: rgba(0,0,0,.5) transparent;
    border-style: solid;
    border-width: 0 15px 15px;
}

.km-ios .km-popup-arrow:after
{
    border-color: rgba(24,31,49,.9) transparent;
}

.km-ios .km-left .km-popup-arrow:after,
.km-ios .km-right .km-popup-arrow:after
{
    border-color: transparent rgba(24,31,49,.9);
}

.km-ios .km-down .km-popup-arrow:before
{
    margin-top: -1px;
}

.km-ios .km-down .km-popup-arrow:after
{
    border-color: rgba(106,111,124,.9) transparent;
}

.km-ios .km-up .km-popup-arrow:after
{
    border-width: 15px 15px 0 15px;
}

.km-ios .km-left .km-popup-arrow:after
{
    border-width: 15px 0 15px 15px;
}

.km-ios .km-right .km-popup-arrow:after
{
    border-width: 15px 15px 15px 0;
}

/* ModalView */

.km-ios .km-modalview
{
    background-color: @default-background-color;
    .box-sizing(border-box);
    .box-shadow(~"0 0 15px rgba(0,0,0,.5), 0 0 2px rgba(0,0,0,.5)");
}

.km-root .km-ios .km-modalview
{
    .border-radius(5px);
}

.km-ios .km-modalview .km-header
{
    padding: 0;
    margin: -1px 0 0;
}

.km-ios .km-modalview > :first-child
{
    border: 0;
}

